<template>
    <div class="largeScreen-1">
        <div class="largeScreen-1-title "><span class="gradient-text">近期采购金额预览</span> </div>
        <div class="top_select">
            <el-select v-model="date_item" placeholder="近7天" @change="change_date(date_item)">
                <el-option v-for="item in dateList" :key="item.type" :label="item.label" :value="item.type">
                </el-option>
            </el-select>
        </div>
        <div class="largeScreen-1-icons">
            <div class="largeScreen-1-icon">
                <div class="largeScreen-1-all">
                    <div class="largeScreen-1-icon-img" ><img src="https://api.gygsjcpt.cn/pcimg/largeScreen-1-icon1.png" alt=""></div>
                    <div class="largeScreen-1-icon-title ">采购笔数：<div class="num">{{data.order_num_total}}</div></div>
                </div>
                <div class="largeScreen-1-fen">
                    <div class="largeScreen-1-icon-fentitle">公司端：<span class="num">{{ data.company_order_num_total }}</span></div>
                    <div class="largeScreen-1-icon-fentitle">职工端：<span class="num">{{data.person_order_num_total}}</span></div>
                </div>
            </div>
            <div class="largeScreen-1-icon" style="width: 55%;">
                <div class="largeScreen-1-all" style="width: 40%;">
                    <div class="largeScreen-1-icon-img" style="width: 60px;height: 15px;" ><img src="https://api.gygsjcpt.cn/pcimg/largeScreen-1-icon2.png" alt=""></div>
                    <div class="largeScreen-1-icon-title">采购金额：<div class="num">{{data.order_amount_total}}</div></div>
                </div>
                <div class="largeScreen-1-fen" style="width: 60%;">
                    <div class="largeScreen-1-icon-fentitle">公司端：<span class="num">{{data.company_order_amount_total}}</span></div>
                    <div class="largeScreen-1-icon-fentitle">职工端：<span class="num">{{ data.person_order_amount_total }}</span></div>
                </div>
            </div>
        </div>
        <div id="largeScreen-1" style="width: 100%;height:70%;"></div>
    </div>
</template>


<script>
import * as echarts from 'echarts'
export default {
    components: {},
    data() {
        return {
            date_item: '',
            data: [],
            dateList: [
                { label: '近7天', type: '1' },
                { label: '近30天', type: '2' },
                { label: '2024年', type: '3' },
                { label: '2025年', type: '4' },
            ]
        };
    },
    methods: {
        async change_com() {
            this.date_item = this.dateList[0].type
            await this.getLargeData(this.date_item, localStorage.getItem('change_id'))
            this.init();
        },
        async change_date(type) {
            
            await this.getLargeData(type,localStorage.getItem('change_id'))
            this.init();
        },
        init() {
            let data_num = this.data
            var myChart = echarts.init(document.getElementById('largeScreen-1'));
            let option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                    textStyle: {
                        color: "#2C3E50",
                        fontSize: 12,
                    },
                    confine: true, // 超出范围
                    // formatter: "{b}<br>{a}：{c1} 元<br>{a1}：{c} 笔",

                    formatter:function(e){
                        
                        return `${e[0].axisValue}<br>${e[0].seriesName}：${parseInt(e[1].data).toLocaleString('en-US')} 元<br>${e[1].seriesName}：${e[0].data} 笔`
                    }
                },
                // legend: {
                //     top: "4%",
                //     left: "center",
                //     itemWidth: 18,
                //     itemHeight: 10,
                //     itemGap: 30,
                //     textStyle: {
                //         fontSize: 12,
                //         color: "#fff",
                //         padding: [0, 0, 0, 10],
                //     },
                // },
                // legend: {
                //     textStyle: {
                //         fontSize: 12,
                //         color: "#fff",
                //         padding: [0, 0, 0, 10],
                //     },
                //     formatter: function (name) {

                //         // 假设数据是从 series 中获取的
                //         // var data = option.series[0].data;
                //         // var total = data.reduce(function (a, b) {
                //         //     return a + b;
                //         // }, 0);
                //         // var value = data[name] || 0;
                //         if (name != '采购金额') {
                //             return '采购金额' + ' : ' + ' ' + data_num.order_amount_total + '';
                            
                //         } else {

                //             return '采购笔数 :' + ' ' + data_num.order_num_total  + '';
                //         }
                //     }
                // },
                grid: {
                    top: "18%",
                    left: "4%",
                    right: "3%",
                    bottom: "2%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        data: this.data.date,
                        axisTick: {
                            show: false,
                            alignWithLabel: true,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(24, 119, 163,.3)",
                            },
                        },
                        axisLabel: {
                            interval: 0,
                            margin: 10,
                            rotate: -45,
                            color: "#05D5FF",
                            textStyle: {
                                fontSize: 11,
                                color: "rgba(24, 119, 163,.9)",
                            },
                        },
                    },
                ],
                yAxis: [
                {
                        // name: "单位/元",
                        splitNumber: 5,
                        type: "value",
                        nameTextStyle: {
                            color: "#2C3E50",
                            fontSize: 12,
                            align: "center",
                            padding: [0, 0, 0, 25],
                        },
                        axisLabel: {
                            show: true,
                            fontSize: 12,
                            color: "rgba(24, 119, 163,.7)",
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#D5DBDE00",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                    {
                        type: "value",
                        // name: "单位/笔",
                        splitNumber: 5,
                        type: "value",
                        nameTextStyle: {
                            color: "#ffffff00",
                            fontSize: 12,
                            align: "center",
                            padding: [0, 28, 0, 0],
                        },
                        axisLabel: {
                            formatter: "{value}",
                            color: "rgba(95, 187, 235, 0)",
                            textStyle: {
                                fontSize: 14,
                                color: "rgba(24, 119, 163,.7)",
                                lineHeight: 16,
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#D5DBDE00",
                            },

                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(28, 130, 197, .3)",
                                type: "dashed",
                            },
                        },
                    },

                ],
                series: [
                {
                        name: "采购金额",
                        type: "bar",
                        barWidth: "12",
                        data:this.data.order_num  ,
                        showSymbol: false,
                        symbolSize: 0,
     
                        label: {
                            show: false,
                        },
                        lineStyle: {
                            normal: {
                                color: "#00cde4",
                            },
                        },
                        itemStyle: {
                            normal: {
                                barBorderRadius: 10,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "#efb548",
                                },
                                {
                                    offset: 0.5,
                                    color: "#78c7a1"
                                },
                                {
                                    offset: 1,
                                    color: "#01cde2"
                                }
                                ]),
                            },
                        },
  
                    },

                    {
                        name: "采购笔数",
                        type: "line",
                        
                        yAxisIndex: 1, // 与第二个 y 轴关联
  
                        itemStyle: {
                            color: "#00cde4",
                            borderColor: "#f2ba06",
                            borderWidth: 0,
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: 'rgba(83, 120, 238, 0.1)'
                                    },
                                    {
                                        offset: 0.25,
                                        color: 'rgba(83, 120, 238, 0.25)'
                                    }
                                ],

                            }
                        },

                        data: this.data.order_amount , // 折线图的数据
                    },



                ],
            };


            myChart.setOption(option);
        },
        async getLargeData(type,id='') {
            const res = await this.$axios.get(`https://api.gygsjcpt.cn/api/visualization2/data_2?type=${type || 1}&company_id=${id || ''}`)
            this.data = res.data.data
        },
    },
    async mounted() {
        await this.getLargeData(this.type , localStorage.getItem('change_id'))
        this.init();
    },
    watch: {

    }
};
</script>

<style lang="scss" scoped>
::v-deep {
    .top_select {
        .el-input__inner {
            border: #4c89e4 1px solid;
            height: 30px;
            padding-right: 50px;
            background: #ffffff00;
            background: linear-gradient(to bottom, #00000040 0%, #00bfff50 100%);
            color: #fff;
        }

        .el-input__icon {
            line-height: 0px;
        }
    }
}

// ::v-deep {
//     #largeScreen-1 {
//         canvas {
//             width: 480px !important;
//             height: 100% !important;
//         }
//     }
// }

.largeScreen-1 {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #05133b30 0%, #00206f30 100%);
    .largeScreen-1-icons{
        width: 100%;
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
        .largeScreen-1-icon{
            width: 40%;
            display: flex;
            .largeScreen-1-all{
                // width: 40%;
                justify-content: center;
                align-items: center;
                display: flex;
            }
            .largeScreen-1-fen{
                justify-content: space-between;
                display: flex;
                flex-direction: column;
                color: white;
            }
            .largeScreen-1-icon-img{
                width: 30px;
                height: 15px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .largeScreen-1-icon-title{
                margin-left: 10px;
                color: white;
                font-size: 13px;
            }
            .largeScreen-1-icon-fentitle{
                margin-left: 10px;
                color: white;
                font-size: 12px;
            }
            .num{
                color: #00ecff;
            }
        }
    }
    .top_select {
        position: absolute;
        top: 0;
        right: 0;
    }

    .largeScreen-1-title {
        color: #fff;
        height: 17%;
        font-size: 17px;
        letter-spacing: 2px;
        display: flex;
        align-items: center;
        padding-left: 10%;
        background: url('https://api.gygsjcpt.cn/pcimg/title_bg_long.png');
        background-size: 100% 100%;
    }
}
</style>